<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/header.css"/>
    <link rel="stylesheet" type="text/css" href="css/chat.css"/>
    <style>
        html,
        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
        }
    </style>
</head>

<body contextmenu="return false;">

<header class="mui-bar mui-bar-nav title" style="position: fixed;">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left title-color"></a>
    <h1 class="mui-title title-color title-font"><b id="chatting-nickname" class="title-font">微 信</b></h1>
</header>

<div id="msg-outter" class="mui-content">
    <div id='msg'>

    </div>
</div>

<footer>
    <div class="footer-center">
        <textarea id='msg-text' type="text" class='input-text'></textarea>
    </div>
    <label for="" class="footer-right">
        <button type="button" class="mui-btn mui-btn-gray" id="send">发送</button>
    </label>
</footer>

<script src="js/mui.min.js"></script>
<script type="application/javascript" src="js/app.js"></script>
<script type="text/javascript">
    // 创建命名空间，只需要把自己的代码，写进入，那么外部就无法访问
    //			(function($, doc){

    // 获取上一个页面传入的好友属性值
    var friendUserId;
    var friendNickname;
    var friendFaceImage;
    mui.plusReady(function () {

        // 获取我自己的用户信息
        var me = app.getUserGlobalInfo();

        // 获取聊天页面webview
        var chattingWebview = plus.webview.currentWebview();
        chattingWebview.addEventListener("initHistory", function () {
            initChatHistory();
        });
        // 设置聊天页面的软键盘样式
        chattingWebview.setStyle({
            softinputMode: "adjustPan"
        });

        // 获取上一个页面传入的好友属性值
        friendUserId = chattingWebview.friendUserId;
        friendNickname = chattingWebview.friendNickname;
        friendFaceImage = chattingWebview.friendFaceImage;
        console.log("friendUserId : " + friendUserId + " friendNickname :" +
            friendNickname + " friendFaceImage : " + friendFaceImage);
        // 标题改为朋友的昵称
        document.getElementById("chatting-nickname").innerHTML = friendNickname;


        // 渲染初始化的聊天记录HTML
        initChatHistory();

        var areaMsgList = document.getElementById("msg");
        // 设置聊天记录进入页面的时候自动滚动到最后一条
        areaMsgList.scrollTop = areaMsgList.scrollHeight + areaMsgList.offsetHeight;

        // 获取dom控件
        var msg_text = document.getElementById("msg-text");
        var send = document.getElementById("send");

        // 监听用户输入，使得send按钮变色
        msg_text.addEventListener("input", function () {
            var msg_text_val = msg_text.value;
            if (msg_text_val.length > 0) {
                send.setAttribute("class", "mui-btn-green");
            } else {
                send.setAttribute("class", "mui-btn-gray");
            }
        });

        // 对当前的窗口监听resize事件
        window.addEventListener("resize", function () {
            resizeScreen();
            document.getElementById("msg-outter").style.paddingBottom = "50px";
        });

        // 发送消息按钮的事件绑定
        send.addEventListener("tap", function () {

            // 发送之前判断网络的状态
            var connectionStatus = plus.networkinfo.getCurrentType();
            if (connectionStatus == 0 || connectionStatus == 1) {
                app.showToast("请打开网络连接...", "error");
                return;
            }

            // 获取消息内容
            var msg_text_val = msg_text.value;

            // 判断消息内容，如果长度等于0，则return
            if (msg_text_val.length === 0) {
                return;
            }

            // 发送消息, 渲染消息的html到msg div之下
            sendMsg(app.imgServerUrl + me.faceImage, msg_text_val);
            // 情况消息文本框中的内容
            msg_text.value = "";
            // 发送消息完毕之后，把发送按钮的颜色改为灰白色
            send.setAttribute("class", "mui-btn-gray");

            // 构建ChatMsgVo
            var ChatMsgVo = new app.ChatMsgVo(me.userId, friendUserId, msg_text_val, null);

            // 构建DataContent
            var dataContent = new app.DataContent(app.CHAT, ChatMsgVo, null);
            console.log(JSON.stringify("dataContent : " + dataContent));
            // 调用websocket 发送消息到netty后端
            var wsWebview = plus.webview.getWebviewById("chatlist.html");
            wsWebview.evalJS("CHAT.chat('" + JSON.stringify(dataContent) + "')");


            // 保存聊天历史记录到本地缓存
            app.saveUserChatHistory(me.userId, friendUserId, msg_text_val, 1);
            app.saveUserChatSnapshot(me.userId, friendUserId, msg_text_val, true);
        });
    });

    // 接受消息
    function receiveMsg(msg) {

        var msgHtml = '<div class="friend_lists">' +
            '<div class="header_img">' +
            '<img src="' + app.imgServerUrl + friendFaceImage + '" width="40px" height="40px" />' +
            '</div>' +
            '<div class="msg-wrapper right">' +
            '<p class="msg-left-white">' + msg + '</p>' +
            '</div>' +
            '</div>';

        var msg_list = document.getElementById("msg");
        msg_list.insertAdjacentHTML("beforeend", msgHtml);

        playReceiveMsgSound();
    }

    // 发送消息
    function sendMsg(faceImg, msg) {

        var msgHtml = '<div class="me_lists">' +
            '<div class="header_img">' +
            '<img src="' + faceImg + '" width="40px" height="40px" />' +
            '</div>' +
            '<div class="msg-wrapper left">' +
            '<p class="msg-right-green">' + msg + '</p>' +
            '</div>' +
            '</div>';
        var msg_list = document.getElementById("msg");
        msg_list.insertAdjacentHTML("beforeend", msgHtml);

        playSendMsgSound();
    }

    // 播放发送消息的铃声
    function playSendMsgSound() {
        var audioPlayer = plus.audio.createPlayer("/mp3/send.mp3");
        audioPlayer.play();
    }

    // 播放接受消息的铃声
    function playReceiveMsgSound() {
        var audioPlayer = plus.audio.createPlayer("/mp3/di_didi.mp3");
        audioPlayer.play();
    }

    // 重新调整聊天窗口
    function resizeScreen() {
        var areaMsgList = document.getElementById("msg");
        // 设置聊天记录进入页面的时候自动滚动到最后一条
        areaMsgList.scrollTop = areaMsgList.scrollHeight + areaMsgList.offsetHeight;
    };

    //			}(mui, document));

    // 初始化用户的聊天记录
    function initChatHistory() {
        var msg_list = document.getElementById("msg");

        var me = app.getUserGlobalInfo();
        var myId = me.userId;
        var myFaceImg = me.faceImage;

        var chatHistoryList = app.getUserChatHistory(myId, friendUserId);

        var togetherHTML = "";

        for (var i = 0; i < chatHistoryList.length; i++) {
            var singleMsg = chatHistoryList[i];
            if (singleMsg.flag == 1) {
                togetherHTML += '<div class="me_lists">' +
                    '<div class="header_img">' +
                    '<img src="' + app.imgServerUrl + myFaceImg + '" width="40px" height="40px" />' +
                    '</div>' +
                    '<div class="msg-wrapper left">' +
                    '<p class="msg-right-green">' + singleMsg.msg + '</p>' +
                    '</div>' +
                    '</div>';
            } else {
                togetherHTML += '<div class="friend_lists">' +
                    '<div class="header_img">' +
                    '<img src="' + app.imgServerUrl + friendFaceImage + '" width="40px" height="40px" />' +
                    '</div>' +
                    '<div class="msg-wrapper right">' +
                    '<p class="msg-left-white">' + singleMsg.msg + '</p>' +
                    '</div>' +
                    '</div>';
            }
        }
        msg_list.innerHTML = togetherHTML;
    }

</script>
</body>

</html>